html基础学习

1. 什么是html

  hyper text markup language 超文本标记语言:一门使用标记和浏览器交流沟通的语言,用文本的形式来技术。

2. html页面结构

  <!DOCTYPE html> 文档声明标记

  <html> 网页的起始

  <head> 网页的头部

  <title> 网页标题标记

    放显示在浏览器标题栏的内容

  </title>

  </head>

  <body>网页的主体内容

  </body>

  </html>网页的结束

3. 开发者工具查看页面结构

  在浏览器上右键找到“检查(审查元素、检查元素)”,可以查看该页面的结构代码。

4. html标签学习

4.1 标签中属性语法

  标签属性:描述标签特征的东西

  语法:

    1.必须要写在标签里,开始标签里

    2.属性名=”属性的值”

    3.当有多个属性的时候用空格隔开

4.2 h系列标签(heading标题标签)

  标签:h1 - h6

  用法:<h1>内容</h1>

  特点:可以将文字设置为标题,效果为加粗,字体大小从h1到h6依次变小,h4的字体和普通文本一样大,h系列标签在html中有特殊语义。

4.3 font标签(字体标签)

  用法:<font  color=”gray”   size=”2”   face=”宋体” >内容</font>

  属性:color:设置文字颜色

           size:设置文字大小,范围是1-7,正常为3

           face : 指定文本的字体

4.4 hr标签(Horizontal Rule  水平线标签)

  用法:<hr />

4.5 p标签(paragraph 段落标签)

  用法:<p>内容</p>

  特点:让文字成为段落,占据一行,并且上下有明显间距

4.6 br标签(break 换行标签)

  用法:<br />

  作用:让标签两边的文字换行显示

4.7 strong、ins、em、del和b、u、i、s标签

 

标签

用法

效果

被弃用的相同效果

strong

<strong></strong>

加粗

b

em

<em></em>

斜体

i

ins

<ins></ins>

下划线

u

del

<del></del>

删除线

s

 

4.8 img标签(image)

  用法:<img src=”图片路径” />

  属性:src=”图片的路径” 指定图片标签里需要显示的图片

       alt=”图片加载异常时显示的文字”

       title=”鼠标停留在图片上的时候显示的提示”

4.9 a标签(anchor 超链接)

1: 在页面之间跳转:

  <a href=”跳转到其他页面的相对路径”>这里必须要有内容</a>

  属性:herf=”跳转的目标地址”

     title=”鼠标停留时的提示”

     target=”跳转的方式”

2.使用a标签在页面上定位标签

  2.1 要准备一个被a标签定位的标签,要有id属性

  2.2 a标签的href属性的值是#+目标标签的id

3.实现下载功能

  <a href=”文件的相对路径” ></a>

  注意:

    1.这种方式当下已经很少使用

    2.如果浏览器认识这种文件,会直接在浏览器中打开

4.10 base标签

  用法:写在head标签里

  <base target=”跳转方式” />

  作用:统一设置当前页面上的a标签(未设置target属性)的跳转方式

4.11 无序列表ul(unordered list)

  用法:

  <ul>

    <li></li>

    ...

   </ul>

4.12 有序列表ol (ordered list)

  用法:

  <ol>

    <li></li>

    ...

   </ol>

4.13 自定义列表dl(definition list)

  用法:

  <dl>

    <dt>小标题</dt>

    <dd>内容<dd>

    ...

 

    <dt>小标题</dt>

    <dd>内容<dd>

    ...

  </dl>

4.14 table(表格标签)

  用法:

  <table>

    <caption></caption>

  <thead>

    <tr>

      <th></th>

      ...

    </tr>

  </thead>

  <tbody>

    <tr>

      <td></td>

      ...

    </tr>

    ...

  </tbody>

  <tfoot>

    <tr>

      <td></td>

      ...

    </tr>

  </tfoot>

  </table>

  属性:border:控制边框的粗细

           cellspacing:控制单元格的间距

           width: 控制表格的宽度

        align: 控制的是对齐方式,如果给table设置,控制表格对于浏览器而言的对齐,如果是给td,tr,tbody..控制内容的对齐方式

           colspan/rowspan:控制td合并多少个单元格显示

4.15 input系列标签

1 输入框

  <input type=”text” />

  属性:placeholder:提示的文字,当我们输入内容的时候,会消失

     value:设置输入框的默认值

     maxlength:设置允许输入的最大长度

2 密码框

  <input type=”password” />

3 单选框

  <input type=”radio” />

  name属性:可以让一堆的单选框成为互斥的一组

  checked属性:设置某个单选框默认选中

4 按钮

  <input type=”button” value=”按钮显示的文本” />

5 多选框

  <input type=”checkbox” />

  属性checked:设置多选框默认选中

6 提交按钮

  <input type=”submit” />

  作用:把表单里的数据提交到服务器

7 重置按钮

  <input type=”reset” />

  作用:把表单里的数据恢复默认

  注意点:重置按钮必须放在表单里才能起效果

8 图片提交

  <input type=”image” />

  作用:提交数据

9 文件上传按钮

  <input type=”file”/>

  作用:上传文件

4.16 textarea文本域

  <textarea cols="20" rows="10"></textarea>

  属性:cols:控制宽度,并且是可缩放的最小宽度

     rows:控制高度,并且是可缩放的最小高度

4.17 select(下拉框)

  用法:

  <select>

    <option>选项</option> 

    ... 

  </select> 

  设置某一个选项默认被选中:selected=”selected”

4.18 form表单

  用法:

  <form>

    在这里放表单控件

  </form> 

  表单:用来收集用户信息,用来装表单控件

  表单控件:给用户输入或者交互用的标签 

  action属性:指定数据上交的地址

  method属性:提交数据的方式

4.19 meta标签 

1 设置页面的编码格式 

  <meta charset=”编码格式” /> 

2 设置页面的关键词 

  <meta name=”keywords” content=”” > 

  做搜索引擎优化

3 设置页面的描述 

  <meta name=”description” content=”” > 

  做搜索引擎优化 

4.20 link标签 

1 引入网站的图标 

  <link rel=”shortcut icon” type=”image/x-icon” href=”图标的路径” > 

2 引入css文件 

  <link rel=”stylesheet” href=”css文件的路径” > 

3 dns预解析 

  <link rel="dns-prefetch" href="需要预解析的服务器的地址"> 

  只有特别大的网站才需要做dns预解析。 

4.21 script和style标签

  script:写js代码的 

  style:写css的

4.22 特殊字符

  在浏览器中许多特殊字符需用对应的代码来表示。 

  如:&nbsp;为空格,&lt;为小于号等。

5. 什么是http协议

  超文本传输协议(HyperText Transfer Protocol)

  规定了浏览和服务交互的数据格式。

6. URL

  统一资源定位器(Uniform Resoure Locator)

  协议名+服务器ip+端口+目标资源的路径

7. 什么是SEO 

  搜索引擎优化(Search Engine Optimization):让页面对搜索引擎更加友好 

  目的:让网站符合搜索引擎的排名需求,提高网站在搜索引擎中的排名,提高访问量从而提高收益。

8. HTML语义化

8.1 什么是HTML语义化

  每一个标签都有语义,这个语义是相对于浏览器和搜索引擎的,需要在合适的地方用合适的标签。

8.2 两个没有语义化的标签

  <div></div> 都是容器

  <span></span>

  div是一个占据一整行的容器

  span是一个自适应内容多少的容器

 

posted @ 2016-07-23 17:21  5毛钱小辣条  阅读(145)  评论(0编辑  收藏  举报