蓝旭第一周预习（HTML和CSS）

前端网页设计：

HTML与CSS 的课前预习

• 前端是网页上为用户呈现的部分。
• 主页 homepage :进入网页看到的第一个网页，主页的文件名通常是index。
• 网页元素：站标（logo），导航栏，广告横幅（banner），表单，文字超链接。
• Web前端技术：技术构成和技术标准。
• HTML（结构）：从语义的角度，描述页面结构。CSS（样式）：从审美的角度，美化页面。JavaScript（行为）：从交互的角度，提升用户体验。
• HTML(Hyper Text  Mark Up Language):超文本标记语言。HTML不区分大小写。

• HTML标签

• 基本结构：

1.标题标签

<h1></h1>

<h2></h2>

<h3></h3>                 特点：1) 会将文字自动加粗及放大；

<h4></h4>                             2) 独占一行，属于块级标签。

<h5></h5>

<h6></h6>

*注：h1最大,h6最小。  

2.段落标签

<p></p>

特点：1)对字段对照网页大小进行自适应分段；

           2)属于块级标签独占一行。

   

   3.换行标签

<b/>--用于手动将页面内容换行。

 4.水平线标签

<hr/>--在界面中添加水平线。

 5.字体样式的标签

 6.注释标签

<!--注释-->

 7.字符实体标签

 &nbsp; 空格   /  " 引号/  &copy 版权符号

8.图像标签

<umg src="路径(绝对路径/相对路径)" title="鼠标悬停文本" alt="替代图片文本" width="宽" hight"高"/>

 9.超链接标签

<a href ="news.html" >文字或图片</a>

链接到本站点其他网页：<a href ="news.html" >新闻</a>

链接到其他站点：<a href ="news.html" >百度</a>

虚拟超链接：<a href ="#" >版块2</a>

target：目标  /   taret:  属性常用值 / _slef:在当前窗口打开目标页面/_blank:在新窗口打开目标页面

10.列表标签

10.1 无序列表

<ul>无列表
    <li></li>列表项
    <li></li>独占一行，块级元素
    <li></li>
</ul>

10.2 有序列表

<ol>无列表
    <li></li>列表项
    <li></li>独占一行，块级元素
    <li></li>
</ol>

 10.3 定义列表

<dl>标签定义列表
    <dt></dt>dt标签定义项目
    <dd></dd>dt标签定义项目
    <dd></dd>
    <dt></dt>
</dl>

 11.表格标签

<table border="1"> table标签定义表格，边框为1
        <td rowspan="2"></td>标签定义单元格，列
        rowspan跨行；clospan跨列；align对齐方式；
        <tr>tr标签定义行 
            <th></th>自动加粗，标题
            <th></th>
            <th></th>
        </tr>
 </table>

12.视频标签

<video src="视频路径" controls="controls"></video>
    width 视频宽度 值为：px
    height 视频长度 值为：px
    src 视频播放路径 值为：URL
    controls 显示控件 值为：controls
    autoplay 视频就绪后立马播放 值为： autoplay
    loop 循环播放 值为：loop

12.1兼容视频标签

<video controls loop>
        <source src="video/video.wemb" type="video/wemb"/>
        <source src="video/video.mp4" type="video/mp4 "/>
    </video>
    注*：自上而下
    第一个执行，其他不执行

13.div标签

    页面头部 header
    页面中部 section
    页面底部 footer
    文章内容 article
    侧边栏   aside
    导航栏   nav

 14.iframe 内联框架标签

    语法：
    <iframe src="路径" width="宽度" height="高度" name="名称" frameborder="0"></iframe>
    frameborder：框架边框

内联框架和超链接标签的使用
   <p><a href="https://tv.cctv.com/yskd/special/xjwd/index.shtml" target="myframe">点击这里 
   查看新疆美食</a></p >
   <p><a href="https://www.xiangha.com/xiaochi/xinjiang" target="myframe">点击这里查看新疆烧 
   烤</a></p >
   <iframe id="myframe" name="myframe" width="500" height="500"></iframe>

 15.form表单标签

<form action="路径" method="提交方式" ></form>
        action 指定路径
        method 指定数据提交方式 
        提交方式:get post
        post:
        1.不改变浏览器地址栏状态
        2.安全性高
        3.常用于保存，修改，删除
        get:
        1.会改变地址栏状态
        2.安全性低
        3.常用于查询

16.input 标签

 <input type="text" name="" value=""/>
        type name value必须有
        value是往后台发送的值
        type元素类型
        name元素名称
        value初始值
        maxlength最大字符数或最长长度
        checked 是否被选中(默认选中)
        size初始宽度
        注:
        1.form表单和input标签成对出现
        2.type和name元素必须写

16.1 type常用值标签

text 单行输入框，默认20个字符
password 密码框，加密输入为*
radio 单选按钮
checkbox 复选框/多选框
button 点击按钮
sublimt 提交按钮
reset 重置按钮
file 文本上传按钮  methods="post" 文件提交方式必须是post
email 邮箱文本框
url 地址文本框
range 范围内数值文本框(滑块)
search 搜索文本框
number 数字类型

16.2 selected和checeked 标签

seleced用于单选，checked用于多选,
selected是选择很多项，但是只取当前的项，即最后一个选中的
checked是选中很多项，都选中。

17.列表框 下拉菜单标签（重点*）

<form>
  <select name="city">
  <option value="0" selected="selected">--请选择--</option> //selected默认选择
  <option value="新和">新和</option>
  <option value="库车">库车</option>
  <option value="和田">和田</option>
  <option value="喀什">喀什</option>
  </select>
</form>
数据库中接收的是value的值
selected为默认选中
注意：
1.select option是成对出现的
2.option中必须有value属性

18.文本域标签

textarea
<textarea name="te" id="te" rol="宽度，按英文字符计算，1英文=2中文" rows="rol="宽度，按英文字符计算，1英文=2中文">
</textarea>

19.标注标签

单击标注文本内容，浏览器自动将焦点转移到相关表单元素上
如：
<label for="boy">
<input type="radio" id="boy" name="sex">
</label>
<label for="gril">
<input type="radio" id="gril" name="sex">
</label>
注意：label标签for属性的值需要与input标签中的id属性的值相匹配


hidden隐藏域：用于隐藏信息，给程序员看
readony 只读不写 
disabled禁用
（readony，disabled为Boolean不需要属性值）
 
placeholder定义提示信息，用户输入后自动消失（字体颜色为灰色）
required不可为空
pattern使用正则表达式验证表单
 
正则表达式：
^以......开始
$以......结束
^1[3456789]\d{9}$
1:第一位
3456789：第二位
\d从0~9之间
{9}匹配前一项9次

• CSS标签