html入门

1.常用标签

1.1 标题标签 <h1> - <h6>

1.2 段落标签 <p></p>

1.2 换行标签 <br/>

1.3 文本格式化标签(突出重要文字)

        <strong></strong> <b> </b>加粗

        <em> </em> <i></i> 倾斜

        <del></del> <s></s> 删除线

        <ins></ins> <u></u> 下划线

1.4 图像标签

        <img src="" alt="" title="" />

        当鼠标指向图片时提示alt里的内容,图像加载不出来时显示title的内容

1.5 超链接标签

        <a href="" target=""></a>

        href 要跳转的地址,如果href 里是一个文件地址,点击则会下载文件.如果传的是元素id,则可以作为锚点连接,参考百度百科,跳转至对应文章位置

        target打开网页的方式,默认值是_self当前页面打开,_blank新页面打开

1.6 特殊字符

 1.7 表格标签

        <!-- 
			table 定义表格标签
			thead 表头区域
			tbody 内容区域
			tr 表格中的一行
			th 表头单元格,会加粗、居中显示
			td 表格中普通的单元格
		 -->
		<table align="center" border="1" >
			<thead>
				<tr>
					<th>标题1</th>
					<th>标题2</th>
					<th>标题3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>11</td>
					<td>22</td>
					<td>33</td>
				</tr>
			</tbody>
		</table>

基础合并单元格的方式:

1.跨行合并:rowspan = "合并单元格的个数"

2.跨列合并:colspan = "合并单元格的个数"

1.8 列表标签

<!-- 
			列表标签,作用是布局页面
			特点:整齐、简洁
			列表类型：有序、无序、自定义
            规范:列表里只能写li标签,li标签里可以写其他标签
		 -->
		 
		<!-- 无序列表 -->
		<ul>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ul>
		
		<!-- 有序列表 -->
		<ol>
			<li>列表项1</li>
			<li>列表项2</li>
			<li>列表项3</li>
		</ol>
		
		<!-- 自定义列表 -->
		<dl>
			<dt>关注我们</dt>
			<dt>联系我们</dt>
			<dt>加入我们</dt>
		</dl>

1.9 表单标签

		<h1>表单案例</h1>
		<form action="表单提交的地址" method="post" name="form1">
			<table>
				<tr>
					<td>姓名:</td>
					<td>
						<input type="text" />
					</td>
				</tr>
				<tr>
					<td>性别:</td>
					<td>
						<label for="nan">
							<input type="radio" name="sex" id="nan" checked/>男
						</label>
						<label for="nv">
							<input type="radio" name="sex" id="nv" />女
						</label>
					</td>
				</tr>
				<tr>
					<td>生日:</td>
					<td>
						<select>
							<option>--请选择年份--</option>
							<option>2023</option>
							<option>2022</option>
						</select>
						<select>
							<option>--请选择月份--</option>
							<option>1</option>
							<option>2</option>
						</select>
						<select>
							<option>--请选择日期--</option>
							<option>1</option>
							<option>2</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>爱好:</td>
					<td>
						<input type="checkbox" />骑车
						<input type="checkbox" />健身
						<input type="checkbox" />美女
						<input type="checkbox" checked />都喜欢
					</td>
				</tr>
				<tr>
					<td>自我介绍:</td>
					<td><textarea></textarea></td>
				</tr>
				<tr>
					<td></td>
					<td><input type="submit" value="注册"/></td>
				</tr>
			</table>
		</form>

1.10 <div>和<span> (盒子)

        特点:

        用来布局

        div独占一行(大盒子)

        span可以一行多个,小盒子

2.记不住的查文档

经常查阅文档是一个非常好的学习习惯
推荐的网址
百度: http://www.baidu.com
W3C: http://www.w3school.com.cn/
MDN: https://developer.mozilla.org/zh-CN/