记录--学习前端第一个星期的html重点难点

本文链接：https://blog.csdn.net/wxt_wjc/article/details/103098864

1、适合新手的编辑器

HTML语言的编辑器有很多，比如dw，HBuilder，VSCode, sublime text等等,但是我觉得最适合新手入门的是Editplus,这是一个没有代码提示的编辑器,都要手动敲完整的一个个单词,能让我们快速的记住标签,记住单词,虽然企业开发的时候都是用有代码提示代码补全的,但是人家面试的时候要求用的是手写。当然，只是刚开始的时候推荐使用Editplus，熟练了之后就可以使用有代码提示代码补全的编辑器了。

2、HTML规范

①虽然html的标签没有区分大小写，但是规定标签字母都是小写的。

②双标签符合开闭原则，有开始就要有结束，建议不要手动敲中括号，敲上标签名，然后按Tab键补全。

③命名规范（class/id）：

a.不可以用数字开头，可以数字结尾

b. id名是唯一的，一个文件只能出现一次

c. 不可以出现特殊字符

d.可以使用下划线_ ,横线-

e.不可以用中文

f.驼峰命名法（第一个单词首字母小写）

④嵌套原则：

a.通常是块元素包裹着行内元素(div>span)

b.<p>标签不能嵌套块标签,否则会将一个p标签变成两部分

c.行内元素不能嵌套块元素

3、元素分类及常见元素

①块级元素(display: block)：可以直接设置宽高，通栏显示（独占一行显示）常见的有：div ul ol li h1~h6 p table form dd dt dl

ul>li: 无序列表; ol>li: 有序列表标签 dl>dt/dt: 标题列表标签.

②行内元素(display: inline)：不可以直接设置宽高(可以通过在样式将其变成块元素或者行内块元素,然后设在宽高)，可以在同一行显示常见的有：span a b i u del

③行内块元素(display: inline-block)：可以直接设置宽高，可以在同一行显示常见的有 img button input textarea select

④语义标签：

无语义标签：例如 <span>、<div>等
有语义标签：l比如 <img>、<p>、<ul>、<h1>等

4、表格标签

<!-- table标签属性 cellspacing: 格与格的间距; cellpadding: 每个格的大小. -->
<table cellspacing="0" cellpadding="20">
	<caption>表格标题</caption>
	<thead>  表格头
		<tr> 行
			<th>表</th>
			<th>头</th>
			<th>详</th>
			<th>情</th>
            <th>  </th>
		</tr>
	</thead>
	<tbody>  表格体
		<tr> 换行
            <!-- colspan:跨列显示  rowspan:跨行显示-->
			<td colspan="2">表</td>
			<td>格</td>
			<td>内</td>
			<td>容</td>
		</tr>
		<tr> 换行
			<td>表</td>
			<td>格</td>
			<td>内</td>
			<td>容</td>
            <th>  </th>
		</tr>
		<tr> 换行
			<td>表</td>
			<td>格</td>
			<td>内</td>
			<td>容</td>
		</tr>
	</tbody>
</table>

以上代码的运行结果(为了清楚演示,我给表格加上边框,原本是没有那些线的):

5、form表单

<body>
	<form action="" method="get">
	<!-- 标签属性 -->
	<!-- action 提交表单数据的地址 -->
	<!-- method 提交表单数据的方式get/post -->
		<!-- 表单数据 -->
		<input type="text" placeholder="请输入账号" name="username">
		<input type="password" placeholder="请输入密码" name="userpwd">
		<!-- 提交按钮 -->
		<!-- 表单提交的时候，页面跳转，并提交数据 -->
		<input type="submit" value="提交">
	</form>
	<br><hr><br>
	<form action="">
		<div>
			<input type="text" name="name" placeholder="输入你的名字">
		</div>
		<div>
			<input type="text" name="email" placeholder="输入邮箱">
		</div>
		<!-- 单选框 -->
		<!-- checked  默认选中 -->
		<div>
			男：<input type="radio" name="sex">
			女：<input type="radio" name="sex" checked>
		</div>
		<!-- 复选框 -->
        <!-- checked: 默认选中 -->
		<div>
			跑步：<input type="checkbox" name="run">
			打球：<input type="checkbox" name="ball">
			阅读：<input type="checkbox" name="read" checked>
			编程：<input type="checkbox" name="bianchen">
		</div>
		<!-- 文本输入域 -->
		<div>
			<textarea name="text" placeholder="此刻你的想法" cols="30" rows="10"></textarea>
		</div>
		<!-- 下拉选项 -->
		<div>
			<select name="" id="">

				<option value="广州">广州市</option>
				<option value="广州">深圳市</option>
				<option value="广州" selected="">北京市</option>
				<option value="广州">杭州市</option>
				<option value="广州">上海市</option>
			</select>
		</div>		
		<!-- 按钮 -->
		<div>
			<button>按钮1</button>
			<input type="submit" value="按钮2">
			<input type="button" value="按钮3">
		</div>
	</form>
	<br><hr><br>
	<form action="">
		<input type="file" name="image" id="">
		<input type="submit" value="上传文件">
	</form>
</body>

上面代码的运行结果: