美文网首页网页前端后台技巧（CSS+HTML）【HTML+CSS】
html初级篇（三）——body标签以及其内部运用的标签

html初级篇（三）——body标签以及其内部运用的标签

作者: Charon_Pluto | 来源:发表于2019-01-30 14:04 被阅读0次

一. body标签

标记给用户看的
也可以是设置style等等属性

1.常用的标签

<h*>标签 （header 标题）

一共就6个类型标题

1. 独成一段
2. 加粗
3. 更改字体大小
<h1>标题</h1>
<h2>标题</h2>
<h3>标题</h3>
<h4>标题</h4>
<h5>标题</h5>
<h6>标题</h6>

P标签（Paragraph 段落）

成段出现并且换行，增多之后才会发现

<p>this is paragraph!</p>
<p>this is paragraph2!</p>

div标签和span标签（Division 分隔 ，Span 范围）

容器
没有具体功能，但是可以能够当好一个好的容器
1.容器的作用就是分块
2.捆绑操作的
一个书架进行书籍的搬运可以直接进行书架的搬运，并不需要把书都挪出来
区别：
1.主要一个换行，一个不换行
2.宽高的修改

<div>没效果才能更好的当一个容器</div>
<span>没效果才能更好的当一个容器</span>

img标签（Image 图片） 单标签

src：Source
1.网上的url
2.本地绝对路径
3.本地相对路径
二.alt -> alter（图片占位符）当图片为错误的时候的提示语
三. title （图片提示符）单鼠标移动到图片上的时候的提示语

<img src="" alt="这是范爷" title="范爷">

a标签（Anchor 锚）

a 超级链接标签 a标签可以包裹任何内容凡是跳转的都是a标签进行实现的
href： hyperText reference 超文本引用（你所指向的超文本地址）
原来是找到锚点的作用：当做锚点记录位置用的
1.超级链接
target:_blank(打开新的一页),_self(当前页)
2.锚点
3.打电话tel:139****，发邮件 mail:"101*********@qq.com"
4.协议限定符 可以运行代码

<a href="#demo1">find demo1</a>
<a href="#demo1">find demo2</a>
<a href="https://www.baidu.com" target="_blank">wwww.baidu.com</a>
<a href="tel:139****">拨打电话</a>
<a href="javascript:while(1){alert('让你手欠')}" target="_blank">点一下我试试啊！com on!</a>

ol有序列表 ul无序列表 ( Ordered List , Unordered List)

ol标签
type：有五种类型 1.阿拉伯数字 2.a-z 3.A-Z 4.小写罗马数字 5.大写的罗马数字
sart：从第几开始
reversed ：reversed 逆向（只有一个属性值）

<ol type="1" start="2" reversed="reversed" >
  <li>速度与激情8</li>
  <li>返老还童</li>
  <li>新喜剧之王</li>
  <li>飞驰人生</li>
  <li>天气预爆</li>
  <li>了不起的盖茨比</li>
  并没有什么用
</ol>

ul标签
type：disc -disCircle 实心圆 circle 圈 square方块
如果不想要任何样式在css中设置list-style: none;

<ul type="square">
  <li>速度与激情8</li>
  <li>返老还童</li>
  <li>新喜剧之王</li>
  <li>飞驰人生</li>
  <li>天气预爆</li>
  <li>了不起的盖茨比</li>
</ul>

from表单以及其内部标签

1.from能够发送数据

method： get/post网络请求的类型
action ：提交跳转

2.input 标签

type:属性
(1)text(正常的文本输入框)
(2)password 密码
(3)radio 单选框
3.1此时为了让为同一个必须要设定同一个name，而单选框的值为 其中的value
3.2用户的体验就是checked就是默认选项
(4) type为checkbox， 复选框
1.此时为了让为同一个必须要设定同一个name，而单选框的值为 其中的value
2.用户的体验就是checked就是默认选项
(4) type为 submit，提交按钮

3.select option 标签

因为包裹了，所以可以在select标签为option设置统一的name
然后默认option选中的默认值为他包裹的内容，也可以自己设置value ，两个同时有，以value为准

<form method="get" action="">
<!--type:text(正常的文本输入框) -->
  <p>
    userName:<input type="text"
                    name="username"
                    style="color: #999999"
                    onfocus="if(this.value==='请输入用户名'){
      this.value='';
      this.style.color='#424242'
    }"
                    onblur="if(this.value===''){
      this.value='请输入用户名'
    }">
  </p>

<!--password 密码 -->
  <p>
    password:<input type="password" name="password">
  </p>

<!--  type为radio，单选框 -->
  1.贝克汉姆<input type="radio" name="star" value="xiaobei" checked="checked">
  2.莱昂纳多<input type="radio" name="star"  value="xiaoli">
  3.我<input type="radio" name="star"  value="zhang">

  <!--  type为checkbox， 复选框-->
  1.贝克汉姆<input type="checkbox" name="star" value="xiaobei" checked="checked">
  2.莱昂纳多<input type="checkbox" name="star"  value="xiaoli">
  3.我<input type="checkbox" name="star"  value="zhang">

<!-- 下拉框-->
 <h1>请选择省份</h1>
  <select name="province">
    <option >北京</option>
    <option >上海</option>
    <option >天津</option>
    <option >大连</option>
  </select>
  <input type="submit" value="提交">
</form>

2.不常用的标签

br标签（Break 换行）

就是换行符（一般的标签是为了修改包裹的内容，如果并不需要修改内容，则就只是单标签完成功能）

<br>

hr标签（Horizontal Rule 水平尺）

一条横线（并不怎么重要了）

<hr>

strong标签（strong 加粗）

<strong>加粗</strong>

i标签（Italic 斜体）

视觉要素：无意义，只是为了好看

<i>斜体</i>

em标签（Emphasized 斜体）

表达要素：不仅是是视觉，在浏览器那边主要是为了声明，这里面内容很重要，语音软件可以加重语气

<em>斜体</em>

其实在一般的时候可以通过css的处理字体 font-style: italic

del标签（Deleted 删除）

有中划线的标签

<del>￥100元</del>

address标签（Address 地址，没啥大用）

基本没什么用可以用css进行达到效果

1. 独成一段
2.斜体
3.有中划线的标签
<address>
    辽宁省大连市
</address>

相关文章