前端语言 | HTML CSS 12-14

kaya
110 阅读5分钟

From Head First HTML CSS

12 HTML5标记

将div换成特定的元素

  • article

页面中一个独立的组成部分，如一个博客帖子，用户论坛帖子或新闻报道。

  • nav

页面的导航链接

	<nav>
	<ul>
		<li class="selected"><a href="index.html">HOME</a></li>
		<li><a href="blog.html">BLOG</a></li>
		<li><a href="">INVENTIONS</a></li>
		<li><a href="">RECIPES</a></li>
		<li><a href="">LOCATIONS</a></li>
	</ul>
	</nav>

nav {
    background-color: #efe5d0;
	margin: 10px 10px 0px 10px;
}
nav ul {
	margin: 0px;
	list-style-type: none;/*删去列表的项目符号*/
	padding: 5px 0px 5px 0px;
}
nav ul li {
	display: inline;/*列表项的表现形式由块级转化为内联级*/
	padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
	color: #954b4b;
	border-bottom: none;
	font-weight: bold;

/*
	text-shadow: 1px 1px 3px #e2c2c2; 
	text-transform: uppercase;
*/
}
nav ul li.selected {
	background-color: #c8b99c;
}
  • header

放在页面顶部或者某个区域的顶部
通常页面最顶端的首部元素会将它加入一个类top中，与页面中其他的元素区分开。

  • footer

放在页面底部或者某个区域的底部

  • time

包含一个日期或者时间
<time datatime="2020-02-18>2/18/2020</time>"

  • aside

包含的是对页面的补充如插图或者边栏

  • section

一个主题性内容分组，一般包括一个头部一个底部。

  • video

为页面添加视频媒体

  • 这些特定元素的css规则不需要加上#

视频元素video

  • <vedio controls autoplay width="512" height="288" src="video/test.mp4"></video>
  • autoplay ：自动播放，布尔属性
  • controls： 一组控件来控制播放暂停调节音量等，布尔属性
  • poster： 一个视频未播放时的封面图像路径
  • src ：视频的源位置
  • loop： 视频结束之后是否会重复播放
  • preload： 细粒度的控制视频如何加载，取值有none(用户真正播放视频之前不下载视频) metadata(下载视频元数据，但不下载视频内容) auto(浏览器来决定)
  • 视频格式
  • 容器： WebM，MP4，Ogg
    • 视频编码：Vp8 , H2.64 , Theora
    • 音频编码：Vorbis，AAC，Vorbis
  • <source>元素
    <vedio>元素中<source>元素可以对应每种视频格式，提供一组视频，对于每个source元素，浏览器会加载视频文件的元数据，查看是否能播放这个视频，这个过程十分耗时，我们可以为浏览器提供更多信息来解决这一问题。
  • <source src="video/test.ogv" type='video/ogg; codecs="theora, vorbis"'>
    • type属性使用单引号，首先是指出视频文件的MIME类型，指定容器格式；接着codecs指明对视频和音频使用什么编解码器。
  • 元素
  • <progress>：显示任务的完成进度
  • <canvas>：在页面中显示用JavaScript绘制的图像和动画
  • <meter>：显示某个范围的度量

13 表格与更多列表

  • HTML建立表格

<table> <tr> <td>

  <body>
    <table>
      <caption>
          name<!-- 表格的标题 -->
      </caption>
      <tr>
        <th>City</th><!--表头 -->
        <th>Date</th>
        <th>Temperature</th>
        <th>Altitude</th>
        <th>Population</th>
        <th>Diner Rating</th>
      </tr>
      <tr>
        <td>Walla Walla, WA</td>
        <td>June 15th</td>
        <td>75</td>
        <td>1,204 ft</td>
        <td>29,686</td>
        <td>4/5</td>
      </tr>
     </table>
   </body>

html表格允许你使用HTML标记指定表格的结构，而CSS表格显示提供了一种方法，可以使用一种类似表格的方式展示块级元素。

  • 表格的CSS
  • 单元格之间的空间叫做边框间距(border-spacing)，所以我们不用对单元格设置外边距，而是有边框间距这个属性，这是针对整个表格设置的。
  • 折叠边框
  1. border-spacing: 0px;
  2. border-collapse: collapse;
  • 单元格颜色
  1. 为每一行元素加颜色，指定tr到某个类
  2. nth-child伪类
    >伪类会根据元素的状态指定元素的样式，对于nth-chlid伪类，状态则是一个元素相对于它的兄弟元素的数字顺序。
/*假如再一个section元素中嵌入四个p元素*/
p:nth-child(even){
    background-color: red;
}

p:nth-child(odd){
    background-color: green;
}

p:nth-child(n){/*n=1,是第一个段落*/
    background-color: green;
}
  • 单元格跨多行-rowspan
    <tr>
      <td rowspan="2">Truth or Consequences, NM</td>
      <td class="center">August 9th</td>
      <td class="center">93</td>
      <td rowspan="2" class="right">4,242 ft</td>
      <td rowspan="2" class="right">7,289</td>
      <td class="center">5/5</td>
    </tr>
    <tr>
      <td class="center">August 27th</td>
      <td class="center">98</td>
      <td class="center">4/5</td>
    </tr>

效果： image.png

  • 嵌套表格
    <tr>
      <td rowspan="2">Truth or Consequences, NM</td>
      <td class="center">August 9th</td>
      <td class="center">93</td>
      <td rowspan="2" class="right">4,242 ft</td>
      <td rowspan="2" class="right">7,289</td>
      <td class="center">5/5</td>
    </tr>
    <tr>
      <td class="center">August 27th</td>
      <td class="center">98</td>
      <td>
        <table>
          <tr>
            <th>Tess</th>
            <td>5/5</td>
          </tr>
          <tr>
            <th>Tony</th>
            <td>4/5</td>
          </tr>
        </table>
      </td>

image.png

覆盖嵌套表格的表头颜色：

table table th {
    background-color: white;
}

14 HTML表单

-<form>

<form action="http://wickedlysmart.com/hfhtmlcss/content.php" method="POST">
...
</form>

  • action：该属性包含Web服务器的URL/脚本所在的文件夹/将处理表单数据的服务器脚本名
  • method: 确定表单数据如何发送到服务器
  • 常用的表单元素
  • <input>
  • 文本输入
    eg:<input type="text" name="fullname"> type属性表示希望得到文本输入，大多数表单元素都需要一个name，服务器脚本将使用 这个名字。
  • 提交输入
    eg:<input type="submit"> 创建一个提交按钮
  • 单选按钮输入
    eg:<input type="radio" name="hotornot" value="hot">
    <input type="radio" name="hotornot" value="not">创建包含多个按钮的控件
  • 复选框输入
    eg：<input type="checkbox" name="spice" value="Salt">
    <input type="checkbox" name="spice" value="Pepper">
  • 数字输入 eg：<input type="number" min="0" max="20">
  • 范围输入 eg:<input type="range" min="0" max="20" step="5">
  • 颜色输入 eg:<input type="color">
  • 日期输入 eg:<input type="date">
  • email输入 eg:<input type="email">
  • tel输入 eg:<input type="tel">
  • url输入 eg:<input type="url">
  • <fileset> <legend> 将公共元素组织在一起
<fieldset>
    <legend>Condiments</legend>
        <input type="checkbox" name="spice" value="salt">Salt<br>
        ...
</fieldset>
  • 密码输入 eg：<input type="password" name="secret">
  • 文件输入 eg:<input type="file" name="doc">
  • 多选菜单eg:<select name="character" mutiple>...</select> -placeholder属性：为字段填写格式做出提示
  • required属性：指示一个域是必须的，是一个布尔属性
  • <textarea>

eg:<textarea name="comments" rows="10" cols="48"> </textarea> 开始和结束标识之间的文本会成为浏览器文本控件中的初始文本。

  • <select> <option>

会在页面中创建一个菜单控件。菜单提供了一种从一组选项中做出选择的方法。select元素和option元素结合使用可以创建一个菜单。

<select name="characters">
    <option value="Buckaroo">Buckaroo Banzai</option>
    <option value="Tommy">Perfect Tommy</option>
    <option value="Penny">Penny Priddy</option>
    <option value="Jersey">New Jersey</option>
  • method方法
  • GET 打包表单数据，并把数据追加到URL；对于可以加书签的请求，用GET；
  • POST 打包表单数据，并把它作为请求的一部分发送到服务器；如果表单数据是私有的或者表单数据很多，如包括<textarea>或者file<input>元素的
  • 可访问性
  • <lable>

<input type="radio" name="hotornot" value="hot" id="hot"> <label for="hot"> hot</label>
想用label先为表单元素添加id属性，然后for属性对应相应的id。标签可以放在与它关联的控件的前面或者后面。

avatar
文章
阅读
粉丝