Web HTML I

1.HTML

 HTML作用： 负责搭建页面结构和内容 （盖房子）
 学习HTML主要学习的就是有哪些标签

2.文本相关标签

 h1-h6 文本标题, 特点: 独占一行, 自带上下间距, 字体加粗
 p 段落标签, 特点: 独占一行,自带上下间距
 hr 水平分割线
 br 换行
 b 加粗
 i 斜体
 u 下划线
 s 删除线

3.列表标签

 无序列表: ul和li 组合 unordered list list item 列表项
 有序列表: ol和li 组合 ordered list
 列表嵌套: 有序列表和无序列表可以任意无限嵌套 .

4.图片标签img

 src: 资源路径
 相对路径: 访问站内资源
 图片和页面在同级目录: 直接写图片名
 图片在页面的上级目录: …/图片名
 图片在页面的下级目录: 文件夹名/图片名
 绝对路径: 访问站外资源, 图片盗链, 有找不到图片的风险
 alt: 图片不能正常显示时显示的文本
 title: 图片标题
 width/height: 设置宽高 , 只设置宽度时高度会自动等比例缩放
 像素
 上级元素百分比

5.超链接a

 href: 资源路径, 作用类似图片标签的src
 a标签包裹文本为文本超链接, 包裹图片为图片超链接
 页面内部跳转, 在目的地的元素里面添加id=xxx 然后在超链接里面添加href=“#xxx”

6.表格table

 相关标签: table tr表示行 td表示列 th表头 caption标题
 相关属性: border边框 colspan跨列 rowspan跨行

7.表单form

 作用: 获取用户输入的各种信息 并提交给服务器
 学习form表单主要学习的就是有哪些控件

<form action="http://www.baidu.com">
    <!--maxlength最大字符长度
     value设置默认值
     readonly只读-->
   用户名:<input type="text" name="username" maxlength="5"
        value="abc" readonly ><br>
    密码:<input type="password" name="password"><br>
    <!--value是单选框必须添加的属性 否则提交on
    checked默认选中-->
    性别:<input type="radio" name="gender" value="m" id="r1">
    <label for="r1">男</label>
    <input type="radio" name="gender" checked value="w">女<br>
    兴趣爱好:<input type="checkbox" name="hobby" value="cy">抽烟
    <input type="checkbox" name="hobby" checked value="hj">喝酒
    <input type="checkbox" name="hobby" value="tt">烫头<br>
    生日:<input type="date" name="birthday"><br>
    靓照:<input type="file" name="pic"><br>
    所在地:
    <!--value设置提交的内容    selected默认选中-->
    <select name="city">
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        <option value="gz" selected>广州</option>
    </select><br>
    <input type="submit" value="注册">
</form>

8.分区标签

 作用: 可以理解为是一个容器,将多个有相关性的标签进行统一管理
 块级分区标签div: 特点是独占一行
 行内分区标签span: 特点是共占一行
 页面区域如何划分? 至少分为三大区(头,体,脚) 每个大的区域再划分n个小的区域
 HTML5的标准中新增了一些语义更强的分区标签,为了提高代码的可读性. 这几个标签的作用和div一样都是块级分区标签
 header头
 footer脚
 main主体
 section区域
 nav 导航

9.CSS 层叠样式表

 Cascading Style Sheet
 作用: 美化页面(装修)

10.如何在HTML页面中添加CSS样式代码

 三种引入方式:
 内联样式: 在标签的style属性中添加样式代码, 弊端:不能复用
 内部样式: 在head标签里面添加一个style标签, 在标签体内写样式代码, 可以实现复用但是只能本页面复用
 外部样式: 在单独的css样式文件中写样式代码, 在html页面中通过link标签引入, 可以实现多页面复用, 可以将html代码和css样式代码分离

11.选择器

 作用: 通过选择器找到页面中的元素之后再添加样式
1. 标签名选择器: 选取页面中所有同名标签
 格式: 标签名{样式代码}
2. id选择器: 当需要选择页面中某一个元素时使用
 格式: #id{样式代码}
3. 类选择器: 当需要选择多个不相关的元素时,给多个元素添加相同的class属性,然后通过类选择器进行选择
 格式: .class{样式代码}
4. 分组选择器: 分组选择器可以将多个选择器合并成一个
 格式: h4,#id,.class{样式代码}
5. 属性选择器: 通过元素的属性选择元素
 格式: 标签名[属性名=“属性值”]{样式代码}
6. 任意元素选择器: 选择页面中所有标签
 格式: *{样式代码}

我是将军；我一直都在，。！