HTML

第十三章 前端开发-HTML

设置背景:
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">


 

1 域名解析

# 域名解析
域名解析是把域名指向网站空间IP,让人们通过注册的域名可以方便地访问到网站的一种服务。IP地址是网络上标识站点的数字地址,为了方便记忆,采用域名来代替IP地址标识站点地址。域名解析就是域名到IP地址的转换过程。域名的解析工作由DNS服务器完成。
域名解析也叫域名指向、服务器设置、域名配置以及反向IP登记等等。说得简单点就是将好记的域名解析成IP,服务由DNS服务器完成,是把域名解析到一个IP地址,然后在此IP地址的主机上将一个子目录与域名绑定。
互联网中的地址是数字的IP地址,域名解析的作用主要就是为了便于记忆。

域名--ip -- 192.168.14.00
http://192.168.14.00 --www.jd.com --DNS解析
{'www.jd.com':'192.168.14.00'}

2 请求和响应

请求:浏览器客户端(server)给服务端发信息
响应:服务端给客户端(server)回信息

3 标签

Html标签:超文本标记语言,就是标记用的。

<meta/> # 自封闭的
<h1></h1> # 全封闭的
   
标签属性 id='xx' asgdsg='xxx'
<h1 id='xx' asgdsg='xxx'>
   

   
   
1.<!DOCTYPE html>声明为HTML5文档。
   
2.<html>、</html>是文档的开始标记和结束的标记。是HTML页面的根元素,在它们之间是文档的头部(head)和主体(body)。
   
3.<head>、</head>定义了HTML文档的开头部分。它们之间的内容不会在浏览器的文档窗口显示。包含了文档的元(meta)数据,配置信息等,是给浏览器看的,你看到的是在body标签里面写的。
   
4.<title>、</title>定义了网页标题,在浏览器标题栏显示。(修改一下title中的内容,然后看一下浏览器,你就会发现title是什么了)
   
5.<body>、</body>之间的文本是可见的网页主体内容。

# html 基本格式
<!DOCTYPE html>
<html lang="zh-CN">   #这个lang表示语言,zh-CN是中文的意思,就是说,你整个文档的内容以中文为主,如果以英文为主,就写成lang='en'

<head>
 <meta charset="UTF-8">
 <title>css样式优先级</title>
</head>
<body>

</body>
</html>

4 标签的分类

  • 分为两类

    • 内敛标签(行内标签):不独占一行,内敛标签只能嵌套内敛标签【b\i\u\s\button\span\img\a】

    • 块级标签(行外标签):自己独占一行,可以嵌套内敛标签和某些块级标签【\h1-h6\br\hr\p\div】

    • p标签:不能嵌套p标签,也不能嵌套块级标签

1. head标签中的标签
<title></title>  定义网页标题
<meta/> 定义网页原信息、配置信息(了解)
2. boby标签中的基本标签
div标签和span标签(常用)
    这两个标签是没有特别的样式的。<div>xxxx</div>,但是这是两个标签最大的特点,可以通过CSS来控制,就像咱们画画一样,在一个白纸上画好,还是在一个报纸上画好啊,对不对。打开个网页通过f12看一下,就发现多数都是div和span。

    div标签用来定义一个块级元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。
    span标签用来定义内联(行内)元素,并无实际的意义。主要通过CSS样式为其赋予不同的表现。

    块级元素与行内元素的区别:
    所谓块元素,是以另起一行开始渲染的元素,行内元素则不需另起一行。如果单独在网页中插入这两个元素,不会对页面产生任何的影响。
    这两个元素是专门为定义CSS样式而生的。

    刚才学的标签:

      块级标签:p、h1--h6、hr、div

      内联标签:b、i、u、s

  注意:

    关于标签嵌套:通常块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。div是可以包含div的
<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>
  段落标签   # 独占一个段落
</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>


<!--水平线/分割线-->
<hr>
2.1 img标签
图片标签
属性 src='图片路径' 网络地址的绝对路径|本地相对路径
属性 alt="图片未加载成功的提示信息"
示例:
<img src='1.jp' alt="这是一个美女图片,请稍等..." title="鼠标悬浮的提示信息" width="200" height="200">

width 指定宽度多少
height 指定高度是多少
2.2 a标签 超链接标签
属性
hred:超链接的地址
target:是否新建窗口
target="_self" 当前窗口打开某个路径对应的html页面
target="_blank" 新建窗口打开某个路径对应的html页面
示例:
<a href="https://www.baidu.com" target="_blank">百度</a>
2.3 列表标签
无序列表:
<ul type="none">
   <li>太白</li>
   <li>alex</li>
   <li>景女神</li>
</ul>

有序列表:
<ol type="a" start="2">
   <li>大壮</li>
   <li>b哥</li>
   <li>wusir</li>
</ol>
2.4 标题列表标签
<d1>
   <dt>标题1</dt>
   <dd>内容</dd>
   <dt>标题2</dt>
   <dd>内容1</dd>
   <dd>内容2</dd>
</d1>
2.5 特殊符号
空格:&nbsp;
小于号:&lt;
大于号:&gt;
&符号:&amp;
¥&yen;
版权标识(写公司网站的时候会用到):&copy;
注册(一个圆圈里面有个R):&reg;
2.6 表格标签(重点)
table
cellpadding:文字和内边框的距离
cellspacing:内边框和外边框的距离


<table border="1" cellpadding="10" cellspacing="20">
   <thead>
       <tr>
           <th>姓名</th>
           <th>年龄</th>
           <th>爱好</th>
       </tr>
   </thead>
<tbody>
       <tr>
           <td>b哥</td>
           <td>40</td>
           <td>炒鸡蛋</td>
       </tr>
       <tr>
           <td>大壮</td>
           <td>38</td>
           <td>抽烟喝酒烫头</td>
       </tr>
   </tbody>
</table>
3. form 标签
  • 表单标签和input标签,用户输入或者选择使用的标签

action:指定数据提交路径
input标签:
  type属性:控制输入框的样式的
  name属性:分组,携带数据的key   key:value
  value:选择框提交数据的时的值,输入框的默认值
input type属性的值:
text 单行输入文本 <input type="text" />
password 密码输入框(不显示明文)<input type="password" />
date 日期输入框 <input type="date"  />
checkbox 复选框 <input type="checkbox" checked="checked" name="x" />
radio 单选框 <input type="radio" name="x" />
submit 提交按钮 <input type="submit" value="提交" /> #发送输入浏览器上输入标签中的内容,配合form表单使用,页面会刷新
reset 重置按钮 <input type="reset" value="重置" /> # 页面不会刷新,将所有输入的内容清空
button 普通按钮 <input type="button" value="普通按钮" />
hidden 隐藏输入框 <input type="hidden" />
file 文本选择框 <input type="file" /> (等学了form表单之后再学这个)



<form action="http://127.0.0.1:8001">
   
  用户名:<input type="text" name="username" value="dazhuang">
  密码: <input type="password" name="password" value="111">
   <input type="radio" name='sex' value='1'>男
   <input type="radio" name="sex" value="2">女
   <input type="checkbox" name="hobby" value="a">喝酒
   <input type="checkbox" name="hobby" value="b">抽烟
   <input type="checkbox" name="hobby" value="c">烫头
   <input type="submit">
   <hr>
   <input type="date">
   <input type="button" value="普通按钮">
   <input type="reset">
   <input type="hidden">
   <input type="file">
   
</form>


form 表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通按钮。
<input type="submit">
<button>提交按钮</button>

input的其他属性
checked 默认选中
<input type="radio" name="sex" value="2" checked>女
# 当属性名和属性值相同时可以简写
<input type="radio" name="hobby" value="a"> 喝酒
<input type="radio" name="hobby" value="b"> 抽烟
<input type="radio" name="hobby" value="c"> 烫头


readonly 只读 针对的输入框 text password
<input type="password" name="password" readonly>
disabled 不允许操作 ,所有的input都可设置
设置了readonly 的标签,它的数据可以提交到后台,设置了disabled的数据不可以提交到后台。
4. select标签 下拉选择框
单选:
<select name="city">
   <option value="1">北京</option>
   <option value="2" selected>上海</option>
   <option value="3">深圳</option>
</select>


多选:multiple
<select name="city" multiple> # multiple:布尔属性,设置后为多选下拉框,否则默认单选
   <option value="1">北京</option>
   <option value="2" selected>上海</option> # selected:默认选中该项
   <option value="3">深圳</optio>
</select>
5. label标签
  • 标识 标签功能的

方式一:for:执行对哪个标签进行标识
效果:点击label标识的文字,就能让标识标签获光标
id
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="dazhuang">

方式二:
<label>
  密码:<input type="password" name="password" value="111" disabled>
</label>
6. textarea 多行文本
<textarea name="memo" id="memo" clos="30" rows="10">
  默认内容
</textarea>

name:名称
rows:行数 # 相当于文本框高度的设置
clos:列数 # 相当于文本框长度设置
disabled:禁用
posted @ 2021-03-26 09:08  Jack_Gao  阅读(238)  评论(0)    收藏  举报