前端基础开篇

系统管理员 2021-09-23 08:54 367阅读 0赞

### 前端基础开篇 ###

*  一、html/css/JavaScript的关系
 *  二、相关标签
 *  三、图像显示
 *  四、表单
 *   *   *   *  1. 选择框：
             *  2. 下拉框：
             *  3、label
 *  五、表格

# 一、html/css/JavaScript的关系 #

1.  HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.  CSS样式是表现。就像网页的外衣。
3.  JavaScript是用来实现网页上的特效效果。

# 二、相关标签 #

`<em>` 表示强调，`<strong>` 表示更强烈的强调，在浏览器中`<em>` 默认用斜体表示，`<strong>` 用粗体表示。  
`<span>`标签是没有语义的，它的作用就是为了设置单独的样式用的。  
使用`<q></q>`实现引用，它是对短文本的引用。用标签的真正关键点不是它的默认样式双引号，而是它的语义：引用别人的话。  
`<blockquote>引用文本</blockquote>`，它是对长文本的引用。  
`<br />`表示回车。  
`<hr />`表示水平横线。  
`<address>`标签，定义一个地址（比如电子邮件地址）、签名或者文档的作者身份。  
`<code>代码语言</code>`，如果是多行代码，可以使用`<pre>`标签。  
`<div></div>`标签为网页划分独立的版块。  
空格：` ` 在html代码中输入多个空格只作用一个。

# 三、图像显示 #

1、src：标识图像的位置；  
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；  
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；  
4、图像可以是GIF，PNG，JPEG格式的图像文件。

# 四、表单 #

<form method="post" action="save.php"><input value="输入框”/></form>
    <textarea  rows="行数" cols="列数">这是默认值</textarea>

#### 1. 选择框： ####

1、type:  
当 type=“radio” 时，控件为单选框  
当 type=“checkbox” 时，控件为复选框  
2、value：提交数据到服务器的值  
3、name：为控件命名  
4、checked：当设置checked="checked"时，该选项被默认选中

#### 2. 下拉框： ####

1.  单选框

<select>
        <option value="c">c</option>
        <option value="java" selected>java</option>
        <option value="python ">python</option>
    </select>

1、option：选项  
2、value：提交数据到服务器的值  
3、selected：该选项被默认选中

1.  多选框

<select multiple>
        <option value="c">c</option>
        <option value="java">java</option>
        <option value="python ">python</option>
    </select>

通过ctrl+单击键进行多选。

type：只有当type值设置为submit时，按钮才有提交作用。  
value：按钮上显示的文字。

type：只有当type值设置为reset时，按钮才有重置作用。  
value：按钮上显示的文字。

#### 3、label ####

label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。

标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。  
例如：这里的username和pass要和input输入框下的id的值相同，否则点击label下的文字的时候无法起作用。

# 五、表格 #

创建表格的四个元素：table、tbody、tr、th、td  
1、`<table>…</table>`：整个表格以`<table>`标记开始、`</table>`标记结束。  
2、`<tbody>…</tbody>`：如果不加`<thead><tbody>` , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）  
3、`<tr>…</tr>`：表格的一行，所以有几对tr 表格就有几行。  
4、`<td>…</td>`：表格的一个单元格，一行中包含几对`<td>...</td>`，说明一行中就有几列。  
5、`<th>…</th>`：表格的头部的一个单元格，表格表头。  
6、表格中列的个数，取决于一行中数据单元格的个数。