HTML

HTML介绍

基本结构
html内不严格区分大小写，但是建议标签名全部小写

<!DOCTYPE html>//网页声明 告诉浏览器，现在执行的文件为html文件    
<html>
<!-- head标签内设置浏览器 -->	
<head>
	<!-- 设置字符集  解决中文乱码-->
	<meta charset="utf-8">
	<!-- 网页标题 -->
	<title></title>
</head>
<!-- body标签内对页面内容进行设置 -->
<body>
	你好
</body>

标题标签

标题标签
hn n代表数字取值范围1-6
1.数字越大，字体越小
2.自动加粗文字
3.自动换行

一级标题建议只使用一次
语义化

段落标签

<p></p>自动换行

 <p>段落1</p>
 <p>段落2</p>

超链接标签

超链接标签 a
    属性
	    href设置链接跳转地址
		    绝对路径  网址
		    相对路径
			    参考当前文件，寻找目标文件
			    ./当前目录
			    ../返回上一级
			    ../../返回上两级
	    target设置链接打开方式
		    _blank新窗口打开
    自动添加下划线
    颜色
    不会自动换行，没有内容就没有大小
    注意：a标签内不允许再嵌套a标签
	 
<a href="http://www.baidu.com" target="_blank">百度</a>
<a href="./02-标题标签.html">标签</a>

锚点技术

通过a标签和id相配合实现当前页面的锚点操作

   示例：
       <a href="#section">点击这里</a>
       <p id="section"></p>

图片标签

图片标签 img
不会自动换行
	
                src引入图片资源 设置图片路径
                    绝对路径
                    相对路径
                属性
                    alt设置图片加载失败时显示
                    title设置图片描述信息
                    width设置宽度
                    height设置高度

列表标签

ol li 有序列表
start 设置开始
type 设置类型

        <ol start="3" type="a">
		<li>哈哈</li> //c.哈哈
		<li>哈哈</li> //d.哈哈
		<li>哈哈</li> //e.哈哈
	</ol>

ul li 无序列表

         <ul>
                 <li>内容1</li>
                 <li>内容2</li>
                 <li>内容3</li>
         </ul>

dl dt dd 自定义列表

        <dl>
                <dt>亲爱的</dt>
                <dd>今天天气真好<dd>
        </dl>
        
        亲爱的某某某
             今天天气真好

表单标签

		form标签 用于定义表单提交地址与提交方式
			属性
			action设置表单提交地址
			method设置表单提交方式
				get ?user=1111111111&pass=222222
				post
					区别
						1.get提交任务栏可见，post提交任务栏不可见
						2.get不安全，post相对安全
						3.get提交的数据大小限制，post没有大小限制
		input
			name设置键
			value设置值 用户输入的表单不用设置value
			type类型
				text文本
				password密码
				submit提交按钮
				radio单选框 必须设置相同的name，不同的value
				checkbox复选框 必须设置相同的name，不同的value
				reset重置按钮
				button按钮
				image图片提交 src
				file上传文件 必须给form标签添加 enctype="multipart/form-data"
				hidden隐藏域 不会显示
		select option下拉框
		textarea 文本域

表单常见属性

                   设置表单提示信息placeholder
			注意：需要用户输入的表单才设置placeholder
		readonly以及disabled
			区别
				1.readonly支持提交，disabled不支持提交
				2.readonly只支持text，password以及文本域使用，disabled都可以使用
		设置默认选项
			单复选框默认选择 checked
			下拉框默认选择 selected

修饰文字标签

        <!-- 加粗 -->
	<b>加粗文字</b>
            
	<!-- 强调加粗 -->
	<strong>强调加粗</strong>
            
	<!-- 斜体 -->
	<i>斜体</i>
            
	<!-- 强调斜体 -->
	<em>强调斜体</em>
            
	<!-- 下划线 -->
	<u>下划线</u>
            
	<!-- 强调下划线 -->
	<ins>强调下划线</ins>
            
	<!-- 删除线 -->
	<s>删除线</s>
            
	<!-- 强调删除线 -->
	<del>强调删除线</del>
	
	<br>换行
	<!-- hr width设置线条宽度 color设置线条颜色 自动居中 -->
	<hr>分割线
	
	<!-- font 已废弃
		color
		size
	 -->
	 <font color="red">hello</font>
             
	 <!-- 上标 -->
	 2<sup>2</sup>
             
	 <!-- 下标 -->
	 H<sub>2</sub>O

表格

                        表格
			table 用于定义表格的开始与结束
				属性
					border边框 0代表没有边框 1代表有边框 数字越大边框越粗
					cellpadding表格内补白
					cellspacing表格外补白
					align设置表格位置
						center left right
			caption 表格标题
			tbody 表格内容
			tr 行标签
			td 列标签
				align设置表格内容的位置
					center left right
				合并
					合并行 rowspan 从上到下
					合并列 colspan 从左到右
			th 列头标签 自动居中自动加粗

表格单元格的宽度由这一列的最宽的单元格决定，单元格的高度由这一行最高的单元格决定，所以没有办法单独设置一个单元格的大小

无意义标签

			div 用于布局
			span 用于修饰文字
		标签分类
			块级标签  
				可以设置大小，能自动换行
			行级标签
				不可以设置大小，不能自动换行
			行间块状标签
				可以设置标签大小，不能自动换行

实体字符

        实体字符 用于替代某些不能正常显示的符号
			空格 &nbsp;
			> &gt;
			< &lt;
			& &amp;
        相当于文字

外部引入窗口

    <h1>百度页面</h1>
	<!-- 外部引入窗口 -->
	<iframe src="02-表格.html" frameborder="0"></iframe>

滑动标签

    <marquee behavior="" direction="down">广告</marquee>

HTML学习笔记