第二章 html结构

时间：2020-04-24 13:00:57 阅读：47 评论：0 收藏：0 [点我收藏+]

文档声明头

‘‘‘<!DOCTYPE html>--html5声明
<html lang=‘en‘>    开始标记  lang语言英文文本
</!doctype>‘‘‘

2.1.标签

也称为标记：

双闭合标签‘<html>‘--开始标记 ‘‘ </html>‘‘--结束标记
单闭合标签‘‘<meta charset=‘UFT-8‘>‘‘

2.1.1 head标签

在网页上不可见

meta 基本网站元信息标签(网站的配置信息)
title 网站的标题
link 链接css文件（直接link+table键）
script 链接JavaScript文件（弹出框）
style 内嵌样式链接html的

2.1.2body标签

h1-h6标题标签 (标题字体大小从大到小)
p标签段落标签

align=‘属性值‘ ：对齐方式，属性值包括：left、center、right
标签是一个文本级标签，p里面只能放文字、图片‘表单元素，其他一律不能放

<p>这是一个段落</p>
<p align=‘center/left/right‘>这是另一个段落</p>

HTML将所有的标签分为两种：
- 文本级标签：p、span、a、b、i、u、em。文本标签里只能放文字、图片、表单元素。
- 容器级标签：div、h系列、li、dt、dd。容器级标签里可以放任何东西。
&nbsp 空格
a anchor 锚点超链接标签跳转网址或者自己写好的地方

- href 链接的网址
- title 鼠标悬浮上的标题
- style 行内样式
- target 目标
  - 默认是_self在当前页面中打开新的链接
  - _blank在新的空白页面打开新的链接
- name 用于设置一个锚点的名称

#跳转到顶部
<a name=‘top‘>顶部</a>  #顶部这个锚的名字叫做top
<pre>

</pre>
<a href=‘#top‘>回到顶部</a>#然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了#top）。

img 图片标签

能够插入的图片类型是：jpg(jpeg)、gif、png、bmp。类型和类型之间有什么区别，css课上讲。
不能往网页中插入的图片格式是：psd、ai
src 链接的图片资源地址或者是存放的地址路径

<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src=".\2.jpg"> 
<!-- 上一级目录中的图片 -->
<img src="..\2.jpg">

- title 提示性文本。公有属性。也就是鼠标悬停时出现的文本。
- style
- alt 图片加载失败的时候显示文本：当图片显示不出来的时候，代替图片显示的内容。
- width 宽度
- height 高度
- align 指图片的水平对齐方式，属性值可以是：left、center、right

块级标签<div>和<span>
- div：把标签中的内容作为一个块儿来对待(division)。必须单独占据一行。
  - align="属性值"：设置块儿的位置。属性值可选择：left、right、 center
- <span>和<dic>唯一的区别在于：<span>``是不换行的，而<div>是换行的。
- div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
- div标签是一个容器级标签，里面什么都能放，甚至可以放div自己。
- span也是表达“小区域、小跨度”的标签，但是是一个文本级的标签。span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
水平线标签<hr> 已废弃
内容居中标签<center>

<center>
        <p>小马哥</p>
</center>

ul 无序列表 unordered list 里面的内容必须是li (type=‘square‘/)
- li
ol 有序列表 ordered list（type= a/A/i)
- li
table （边框：border = ‘0‘ cellpadding=‘0‘ width=‘100‘)
- tr 行
- td

<table border="1" cellspacing="0" width="100%">
        <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td>sex</td>
        </tr>
        <tr>
            <td>1</td>
            <td>沛齐</td>
            <td>19</td>
            <td>女</td>
        </tr>
        <tr>
            <td>2</td>
            <td>女神</td>
            <td>18</td>
            <td>男</td>
        </tr>
        <tr>
            <td>3</td>
            <td>太白</td>
            <td>38</td>
            <td>未知</td>
        </tr>
    </table>

hr 分割线
br 换行
copy -c
form 表单
- input
  - type 控件的类型
    - text 单行文本输入框
    - password 密码框
    - radio 单选框默认选中是checked
      - name
      - checked
    - checkbox 多选框
      - name
      - value
  - name
    - 名称提交服务器的键值对的name
  - value
    - 值提交服务器的键对值的 value
- select 属性 name multiple：多选框
  - option value属性
- textarea 文本框
  - name
  - value
  - cols
  - rows
下拉列表默认选中是selected，multiple 多选
- select
  - option
textarea 多行文本输入框
datetime-local 时间

<form action="" method="get" >
    <!--文本输入框-->
    <p id="username">
        <input type="text" name="name" value="">
    </p>
    <p id="password">
         <input type="password" name="pwd">
    </p>
    <h4>单选框</h4>
    <p>
        <input type="radio" name="sex" checked = ‘checked‘>男
        <input type="radio" name="sex">女
    </p>
    <h4>我的爱好：</h4>
    <p>
        <input type="checkbox" name="a" value="抽烟"> 抽烟
        <input type="checkbox" name="b" value="喝酒"> 喝酒
        <input type="checkbox" name="c" value="烫头"> 汤头
    </p>
    <h4>下拉列表</h4>
    <p>
        <select name="fav" multiple>
            <option value="smoke">抽烟</option>
            <option value="drink" selected>喝酒</option>
            <option value="tangtou">烫头</option>
            <option value="tangtou">烫头</option>
            <option value="tangtou">烫头</option>
            <option value="tangtou">烫头</option>
            <option value="tangtou">烫头</option>
            <option value="tangtou">烫头</option>
            <option value="tangtou">烫头</option>
        </select>
    </p>
    <input type="datetime-local">
    <p>
        <textarea name="" id="" cols="30" rows="10"></textarea>
    </p>
    <p>
        <input type="submit" value="登录">
    </p>
</form>

字体标签 font 已废弃
- face 字体
- color 颜色
- size 字体大小
- 下划线标记<u>中划线标记<s>
- 斜体标签<i>或<em>
- 上标<sup> 下标<sub>
特殊符合
- &nbs：空格（non-breaking spacing，不断打空格）
- &lt：小于号（less than）
- &gt：大于号（greater than）
- &amp：符号&
- &quot：双引号
- &apos：单引号
- &copy：版权©
- &trade：商标`™

2.1.3 总结

字体标签包含有哪些？
- h1-h6
- font
- i或em 斜体
- strong /b 粗体
超链接标签a标签中的href属性有什么作用？
- 链接到一个新的地址
- 回到顶部
- 跳转邮箱
- 下载文件
img中标签中的src和alt属性有什么用？
- 链接图片的资源
- 图片失败的时候显示的标题
如何创建一个简易的有边框线的表格
- 后期：有非常漂亮的表格

<table border=‘1‘ cellspacing=‘0‘>
    <th>
        <td>id</td>
        <td>name</td>
    </th>
     <th>
            <td>1</td>
            <td>alex</td>
        </th>
</table>

orm标签中的action属性和method属性的作用？

action提交到服务器的地址，如果是空的字符串，它表示当前服务器地址
method提交的方式：get和post
- get：明文不安全，地址栏只允许提交2kb的内容，提交的内容会在地址上显示，显示的方式http://127.0.0.1:8080/index.html?name=value&name2-value?
- post:密文提交安全，可以提交任意内容
- 后期要把http协议的内容（重点）
在form标签中表单控件input中type类型有哪些？
- type
  - text 单行文本输入框
  - password 密码输入框
  - radio 单选框
    - 产生单选框，给每个单选按钮设置相同的name属性值
    - 默认选中，给单选按钮添加checked属性
  - checkbox 多选框
    - multiple 产生多选的效果
    - 默认选中，添加checked属性
  - submit 提交按钮会按action中的地址提交
  - file 上传文件
  - datetime_local
- select 下拉列表
  - selected 默认选中
  - multiple 产生多选的效果

- - textarea 多行文本输入框
    - cols 列
    - rows 行数
  - 表单控件中的name属性和value属性有什么意义
    - name属性：提交到当前服务器的名称
    - value属性：提交到当前服务器的值
    - 以后给服务器来使用

<select>
    <option name=‘‘ value=‘‘ selsected>抽烟        </option>  
     <option name=‘‘ value=‘‘ selsected>抽烟        </option>  
</select>

#name提交到服务器中的名称
#value提交服务器中的值

2.1.4HTML特征

对换行和空格不敏感
空白折叠

2.1.5 div+span

div 标签：称为盒子标签，division：分割，把网页分割成不同的独立的逻辑区域

<div id=‘top‘>
</div>

- - 当行高和盒子高度一致时字体是垂直居中的
  - text——align：水平居中
  - line—light：行高
  - height：高度
  - text-decoration：下划线

span标签:对文本可以显示特有的样式

2.1.6lable标签

它中的for属性跟表单控件的id属性有关联

padding 内填充：0 10px<form action=‘‘>
  <label for=‘username‘>用户名：</label>
  <input type=‘text‘ id=‘username‘>
  <label for=‘pws‘>密码：</label>
  <input type=‘text‘ id=‘pwd‘>
</form>

在head中设置样式时：id是#，class是.
id和class可以重名
solid是实心的，border是边框

第二章 html结构

原文：https://www.cnblogs.com/xu1296634150/p/12766351.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)